<template>
  <div class="page-content">

    <!-- 查询表单区域 -->
    <div class="form-section">
      <el-form label-width="90px">
        <el-row :gutter="20">
          <!-- 用户名输入框 -->
          <el-col :xs="24" :sm="12" :lg="3">
            <el-input placeholder="用户名" v-model="searchParameter.user_name" />
          </el-col>

          <!-- 开始日期 -->
          <el-col :xs="24" :sm="12" :lg="5">
            <el-date-picker
              v-model="searchParameter.start"
              type="date"
              placeholder="开始日期"
            />
          </el-col>

          <!-- 结束日期 -->
          <el-col :xs="24" :sm="12" :lg="5">
            <el-date-picker
              v-model="searchParameter.end"
              type="date"
              placeholder="结束日期"
            />
          </el-col>

          <!-- 搜索 & 新增按钮 -->
          <el-col :xs="24" :sm="12" :lg="6" style="text-align: right;">
            <el-button @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <tao-table :data="dataList" :showPage="false" style="margin-top: 15px">
      <el-table-column label="序号" prop="id" />
      <el-table-column label="IM-ID" prop="sdk_id" />
      <el-table-column label="昵称" prop="nick" />
      <el-table-column label="头像" prop="avatar" />
      <el-table-column label="性别" prop="sex" />
      <el-table-column label="出生日期" prop="birthday" />
      <el-table-column label="城市" prop="city" />
      <el-table-column label="职业" prop="profession" />
      <el-table-column label="标签-角色" prop="tag_role" />
      <el-table-column label="标签-业务熟练度" prop="tag_professional_level" />
      <el-table-column label="标签-活跃度" prop="tag_active_level" />
      <el-table-column label="标签-爱好" prop="tag_hobby" />
      

      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="">
            编辑
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #FA6962"
            @click=""
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </tao-table>

  </div>
</template>

<script>
import { getGroupId } from "@/utils/auth";

export default {
  data() {
    return {
      // 日期快捷选项
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },

      // 表格数据及分页
      // 所有涉及到 XXX_level 的数据 熟练度 都是从 0-10 设置数字 10 最高 0 完成不会
      dataList: [{ 
        id: '1',
        sdk_id:'13800006003',
        nick:'小甜甜',
        avatar:'13800006003',
        sex:'男',
        birthday:'1990-10-02',
        city:'苏州',
        profession:'医生',
        tag_role:'宝妈',
        tag_professional_level:'10',
        tag_active_level:'10',
        tag_hobby:'旅游，羽毛球',        
      }], // 示例数据
      allpage: 1,
      showItem: 5,
      current: 1,

      // 提示信息
      alertMsg: '提示信息',

      // 查询参数
      searchParameter: {
        user_name: undefined,
        start: undefined,
        end: undefined,
      },
    };
  },

  mounted() {
    // 页面加载时请求数据
    this.getDataList();
  },

  methods: {
    // 获取数据列表
    getDataList() {
      // 示例 API 请求（已注释）
      // getUserListApi(this.searchParameter).then(res => {
      //   this.dataList = res.data.data;
      //   this.allpage = res.data.total;
      // })
    },

    // 执行搜索
    search() {
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    h3 {
      font-size: 17px;
      font-weight: 500;
    }
  }

  /deep/ .el-form {
    .el-form-item {
      max-width: 700px;
    }
  }

  .form-section {
    margin-bottom: 20px;
  }
}
</style>
